<template>
	<div class="colorful-icon-container">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-divider content-position="left">
					{{lan.title}}
				</el-divider>
			</el-col>
			<el-col :span="24">
				<el-form :inline="true" label-width="80px" @submit.native.prevent>
					<el-form-item :label="lan.name">
						<el-input v-model="queryForm.title"></el-input>
					</el-form-item>
					<el-form-item label-width="0">
						<el-button native-type="submit" type="primary" @click="queryData">
							{{lan.btnSearch}}
						</el-button>
					</el-form-item>
					<!-- <el-form-item label-width="0">
            <el-input :value="copyText" type="text"></el-input>
          </el-form-item>-->
				</el-form>
			</el-col>

			<el-col v-for="(item, index) in queryIcon" :key="index" :xs="6" :sm="8" :md="3" :lg="2" :xl="2">
				<el-card shadow="hover" style="cursor: pointer" @click.native="handleCopyIcon(index, $event)">
					<vab-colorful-icon
						:icon-class="`https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${item}.svg`" />
				</el-card>
				<div class="icon-text">{{ item }}</div>
			</el-col>
			<el-col :span="24">
				<el-pagination :background="background" :current-page="queryForm.pageNo" :page-size="queryForm.pageSize"
					:page-sizes="[72,100,144,216,288,500,1000]" :layout="layout" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import common from '@/common/common.js';
	import list from './colorfulIcon.js';

	export default {
		name: 'colorfulIcon',
		data() {
			return {
				copyText: '',
				layout: 'total, sizes, prev, pager, next, jumper',
				total: 0,
				background: true,
				height: 0,
				selectRows: '',
				queryIcon: [],
				queryForm: {
					pageNo: 1,
					pageSize: 1000,
					title: '',
				}
			}
		},
		computed: {
			lan() {
				var lang = this.$store.state.language;
				var path = "colorfulIcon";
				var r = lang[path];
				if (r == null) return {};
				return r;
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			handleSizeChange(val) {
				this.queryForm.pageSize = val
				this.fetchData()
			},
			handleCurrentChange(val) {
				this.queryForm.pageNo = val
				this.fetchData()
			},
			queryData() {
				this.queryForm.pageNo = 1
				this.fetchData()
			},
			async getData(form) {
				const {
					title,
					pageNo = 1,
					pageSize = 72
				} = form;
				let mockList = list.filter((item) => {
					if (title && item.indexOf(title) < 0) return false
					return true
				})
				const pageList = mockList.filter(
					(item, index) =>
					index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
				)
				return {
					totalCount: mockList.length,
					data: pageList,
				}
			},
			async fetchData() {
				const {
					data,
					totalCount
				} = await this.getData(this.queryForm)
				this.queryIcon = data
				this.allIcon = data
				this.total = totalCount
			},
			handleCopyIcon(index, event) {
				const copyText =
					`<vab-colorful-icon icon-class="https://cdn.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/${this.queryIcon[index]}.svg" />`;
				//const copyText = `<vab-colorful-icon icon-class="${this.queryIcon[index]}" />`
				this.copyText = copyText
				common.tool.clip(copyText, event)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/css/variables.scss";

	.colorful-icon-container {
		::v-deep {
			.el-card__body {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				/* 垂直居中 */
				justify-content: center;
				/* 水平居中 */

				svg:not(:root) {
					font-size: 16px;
					font-weight: bold;
					color: $base-color-gray;
					text-align: center;
					vertical-align: middle;
					pointer-events: none;
					cursor: pointer;
				}

				.svg-external-icon {
					width: 20px;
					height: 18px;
				}
			}
		}

		.icon-text {
			height: 30px;
			margin-top: -15px;
			overflow: hidden;
			font-size: 12px;
			line-height: 30px;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>
